<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>清除浮动</title>
    <style>
        /* 
                父盒子可以不给高度 让子盒子撑开父盒子有多少盒子父亲就有多高

        */
        /* 
            清除浮动
                原因:父盒子很多情况下不方便给高度  但子盒子浮动又不占位置 
                        致使父盒子高度为0  会影响下面的标准流盒子
                本质:清除浮动元素脱离标准流造成的影响
                    如果父盒子本身有高度 则不需要清除浮动
                语法
                    clear:属性值  left right both(实际使用 同时清除左右浮动的影响) 
                    此策略为 闭合浮动

            清除浮动的方法
                额外标签法(隔墙法 w3c推荐)
                    找到最后一个浮动盒子 在后面写个空标签<div style="clear: both;"></div>
                        优点： 通俗易懂 书写方便
                        缺点：添加许多无意义的标签结构化较差
                        最后一个标签必须是块级元素
                父元素添加overflow属性
                    overflow: hidden;
                        缺点: 无法显示溢出的部分
                父级添加after伪元素 额外标签法的升级版
                父元素添加双伪元素

        */
        div.box {
            width: 800px;
            /* height: 400px; */
          /* overflow: hidden; */
           border: solid 1px black;
        }
        .child {
          
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 10px;
        }
       #aa {
        height: 300px;
       }
       /* 给父元素添加after元素 */
       /* .box:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
       } */
       /* 父元素添加双伪元素 */
       .box:before,
       .box:after {
        content: "";
        display: table;

       }
       .box:after {
        clear: both;
       }
      
    </style>
</head>

<body>
    <div id="root">
        <div class="box">
            <div class="child">孩子</div>
            <div class="child">孩子</div>
            <div class="child">孩子</div>
            <div class="child">孩子</div>
            <div class="child" id="aa">孩子</div>
            
          
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>